<template>
	<view class=""
		style="background-color: #70a1ff;height:100vh;box-sizing: border-box;display: flex; flex-direction: column;">
		<view class="gui-h4 hulu-primary-blue gui-color-white"
			style="text-align: center; height:88rpx;line-height:88rpx;">
			任务中心
		</view>
		<view class="play-rule">
			<view class="play-rule-title" @tap="showRule=true">
				<text class="gui-icons gui-block  gui-text"
					style="color:black;font-size: 44rpx;font-weight:1000;">&#xe628;</text>
			</view>
		</view>
		<view class="play-rule2">
			<view class="play-rule-title" @tap="showReward=true">
				<text class="gui-icons gui-block  gui-text"
					style="color:black;font-size: 44rpx;font-weight:1000;">&#xe634;</text>
			</view>
		</view>
		<u-popup :show="showRule" mode="top" @close="close" bgColor="transparent">
			<view class="play-rule-info gui-padding gui-bg-brown">
				<text class="play-rule-txt gui-color-white">任务说明</text>
				<text class="play-rule-txt gui-color-white">场景：各方有3颗棋子，九宫格棋盘。</text>
				<text class="play-rule-txt  gui-color-white">规则：通过下棋，将对方3颗棋子全部最终走入最下方，我方获胜。</text>
				<text class="play-rule-txt  gui-color-white">让棋：当一方轮换下棋，当另一方无路可走，且尚未输掉时，我方需要让棋，留出空位。</text>
				<text class="play-rule-txt  gui-color-white">其他：最下方三颗棋子不能左右进行移动。</text>
			</view>
		</u-popup>
		<u-popup :show="showReward" mode="top" @close="closeReward" bgColor="transparent">
			<view class="play-rule-info gui-padding gui-bg-brown">
				<text class="play-rule-txt gui-color-white">奖励说明</text>
				<text class="play-rule-txt gui-color-white">对战奖励：每完成一项棋盘任务，奖励积分5分，不论胜负。</text>
				<text class="play-rule-txt  gui-color-white">开盘积分：创建房间并完成匹配对战，奖励10分。</text>
				<text class="play-rule-txt  gui-color-white">获胜积分：每胜利一盘对战，奖励10分。</text>
				<text class="play-rule-txt  gui-color-white">兑换：积分用于兑换平台赠送的商品。</text>
			</view>
		</u-popup>
		<view class="gui-margin-top">

		</view>
		<view class="gui-flex  gui-justify-content-center gui-align-items-center" style="flex:1;">
			<view class="gui-flex gui-column gui-justify-content-center gui-align-items-center"
				style="transform: translateY(-50%);">
				<view class="gui-bg-green1 gui-padding gui-border-radius gui-color-white " @tap="toRandom"
					style="width:320rpx;height:140rpx;text-align: center;transform:none;">
					<text class="gui-h1">随机挑战</text>
				</view>
				<view class="" style="height:88rpx;">

				</view>
				<view class="gui-bg-brown1 gui-padding gui-border-radius gui-color-white" @tap="toArea"
					style="width:320rpx;height:140rpx;text-align: center;transform:none;">
					<text class="gui-h1">区域挑战</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/api/request.js'
	import {
		onHide
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				areas: [],
				audio: null,
				showRule: false,
				showReward:false
			};
		},
		onShow() {

		},
		onLoad() {},
		onUnload() {
			console.log("onUnload")
			if (this.audio) {
				this.audio.stop()
			}
		},
		methods: {
			close() {
				this.showRule = false
			},
			closeReward() {
				this.showReward = false
			},
			toRandom(){
				uni.showToast({
					icon:"none",
					title:"暂未开放"
				})
			},
			toArea(){
				uni.navigateTo({
					url:`/subpages/hall/hall`
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper {
		height: 720rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.card-warp {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
		box-sizing: border-box;
		margin: 10rpx;

		.hulu-card {
			width: 200rpx;
			height: 200rpx;
			font-size: 44rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			background-color: #44E58F;
		}
	}

	.play-rule {
		position: absolute;
		left: 50rpx;
		top:120rpx;

		.play-rule-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 800;
			color: #422517;
		}
	}
	.play-rule2 {
		position: absolute;
		right: 50rpx;
		top:120rpx;
	
		.play-rule-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 800;
			color: #422517;
		}
	}
	.play-rule-info {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	
		.play-rule-txt {
			display: block;
			font-size: 24rpx;
			color: black;
		}
	}
</style>